import React, { useEffect, useState } from 'react';
import { Row, Col, Table, Tooltip, Button, Input, Space, Select } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Get } from '../../server/http';
import { Url } from '../../server/http';

const { Search } = Input;

const Member = () => {
    const [loading, setLoading] = useState(false);
    const [dataSource, setDataSource] = useState([]);         // 原始数据
    const [searchTerm, setSearchTerm] = useState("");         // 搜索关键词
    const [page, setPage] = useState(1);
    const [perPage, setPerPage] = useState(20);
    const [total, setTotal] = useState(0);
  // 初始化数据
    useEffect(() => {
        setLoading(true);
        getMember();
    }, []);

    const getMember = (page = 1, perPage = 20, cert = false) => {
        let params = {
            page,
            per_page: perPage
        }
        if (cert) {
            params.search_fields = 'certificate_number';
            params.search_term = cert
        }

		Get(Url.CONTRACTOR_MEMNBER, params).then(
			data=>{
                console.log(data)
                setLoading(false);
				setDataSource(data.data.data)
                setTotal(data.data.total)
			}
		)
	}

    const certificate_type = {
        1: '居民身份证'
    }

    // 表格列定义
    const columns = [
        {
            title: '编号',
            dataIndex: 'member_id',
            key: 'member_id',
            width: '10%',
        },
        {
            title: '姓名',
            dataIndex: 'member_name',
            key: 'member_name',
            width: '10%',
        },
        {
            title: '证件类型',
            dataIndex: 'certificate_type',
            key: 'certificate_type',
            width: '10%',
            render: (text, ) => {
                return certificate_type[text]
            }
        },
        {
            title: '证件号码',
            dataIndex: 'certificate_number',
            key: 'certificate_number',
            width: '20%',
        },
        {
            title: '性别',
            dataIndex: 'gender',
            key: 'age',
            width: '10%',
            render: (text, ) => {
                return text ? '男': '女'
            }
        },
        {
            title: '备注',
            dataIndex: 'member_notes',
            key: 'member_notes',
            ellipsis: true,
            width: '10%',
            render: (text) => <Tooltip title={text}>{text}</Tooltip>,
        },
    ];

    // 分页配置
    const pagination = {
        current: page,
        total: total,
        perPage: perPage,
        onChange: (newPage, newPerPage) => {
            setPage(newPage);
            setPerPage(newPerPage)
            getMember(newPage, newPerPage)
        },
    };

    // 搜索事件
    const handleSearch = (value) => {
        setSearchTerm(value);
        setPage(1); // 搜索后重置到第一页
        getMember(1, perPage, value)
    };

    return (
        <div >
            <Space style={{margin: '20px 0'}}>
                <Search
                    value={searchTerm}
                    placeholder="输入身份证信息搜索"
                    onChange={(e)=>{setSearchTerm(e.target.value)}}
                    onSearch={handleSearch}
                    enterButton={<Button icon={<SearchOutlined />}>搜索</Button>}
                    // 添加清除按钮
                    allowClear
                />
                <Button onClick={() => {setSearchTerm('');getMember(1);}}>重置</Button>
            </Space>
            <Table
                scroll={
                    {scrollToFirstRowOnChange: true,
                        x: false,
                        y: 550
                    }
                }
                key={'member_id'}
                loading={loading}
                columns={columns}
                dataSource={dataSource}
                pagination={pagination}
                bordered
            />
        </div>
    );
};

export default Member;